<template>
<div>
  <x-header id="head_top" :left-options="{showBack: false}">任务列表<a slot="right">{{userName}}</a></x-header>
  <div>
    <flexbox>
      <flexbox-item :span="6/9">
      <div>
      <tab v-model="tabIndex" :animate="true">
      <tab-item @on-item-click="onItemClick" active-class="active-6-1"><span class="iconfont icon-daiban"></span>我参加的</tab-item>
      <tab-item @on-item-click="onItemClick" active-class="active-6-2"><span class="iconfont icon-quanbu"></span>全部</tab-item>
      <tab-item @on-item-click="onItemClick" active-class="active-6-3"><span class="iconfont icon-quanbu"></span>我授课的</tab-item>
  </tab>
  </div>
  </flexbox-item>
      <flexbox-item :span="3/9">
      <div>
        <x-button mini @click.native="showSearch"><icon type="search"></icon>筛选</x-button>
        <badge v-if="searcheNums" :text="searcheNums"></badge>
        </div>
        </flexbox-item>
    </flexbox>
    <div>
      <popup v-model="show7" @on-hide="popOnHide()" height="300px" is-transparent>
        <div style="width: 95%;background-color:#fff;height:250px;margin:0 auto;border-radius:5px;padding-top:10px;">
         <group>
          <calendar v-model="searchDateF" title="培训日期起" show-popup-header popup-header-title="请选择"></calendar>
          <calendar v-model="searchDateE" title="培训日期止" show-popup-header popup-header-title="请选择"></calendar>
           <selector text-align="left" title="所属部门" placeholder="请选择部门" placeholder-align="right" v-model="searchDept" name="dept" :options="deptList"></selector>
           <selector text-align="left" title="培训类型" placeholder="请选择所培训类型" placeholder-align="right" v-model="searchType" name="sys" :options="typeList"></selector>
           <x-input title="培训项目" placeholder="请输入搜索关键字" placeholder-align="right" v-model="searchKey" novalidate ></x-input>
           <x-input title="培训岗位" placeholder="请输入查询岗位" placeholder-align="right" v-model="searchPost" novalidate ></x-input>
         </group>
         <div style="padding:20px 15px;">
          <x-button mini type="primary"  @click.native="show7 = false">搜索</x-button>
          <x-button mini @click.native="searchDateF='';searchDateE='';searchDept='';searchType='';searchKey='';searchPost='';show7 = false">清空</x-button>
         </div>
        </div>
      </popup>
    </div>
    </div>
  <div style="height:100vh;overflow: scroll;">
  <mt-loadmore :top-method="loadTop" topPullText="" :bottom-pull-text="bpt" :bottom-all-loaded="allLoaded" :bottom-method="loadBottom" ref="loadmore">
    <swipeout class="vux-1px-tb">
      <swipeout-item link="detail" transition-mode="follow" v-for="(task,index) in filterTask" :key="task.id+index">
        <div slot="content" class="vux-1px-b" :class="compu(task.sumNo,task.fdNo) ? 'task_list0':'task_list1'" @click="showDetail(task,tabIndex)">{{task.item}}</div>
      </swipeout-item>
    </swipeout>
    </mt-loadmore>
       <div>{{noData}}</div>
    </div>
    <transition name="router-slid" mode="out-in">
            <router-view></router-view>
    </transition>
  </div>
</template>
<script>
import "assets/iconfont/iconfont.css";
import vue from "vue";
import { Loadmore } from "mint-ui";
vue.component(Loadmore.name, Loadmore);
import {
  getMyAcList,
  getAllAcList,
  getMyTeachAcList,
//   creSF,
  getDDUserInfo,
  getUser
} from "src/service/actual";
import {
  Icon,
  XHeader,
  Swipeout,
  SwipeoutItem,
  SwipeoutButton,
  Flexbox,
  FlexboxItem,
  Badge,
  TransferDom,
  Popup,
  Tab,
  TabItem,
  Popover,
  Group,
  Selector,
  Cell,
  CellBox,
  XSwitch,
  XButton,
  XInput,
  XTextarea,
  Rater,
  Calendar
} from "vux";
import { isNullOrUndefined } from "util";
export default {
  components: {
    Icon,
    Swipeout,
    SwipeoutItem,
    SwipeoutButton,
    Flexbox,
    FlexboxItem,
    Badge,
    TransferDom,
    Popup,
    Tab,
    TabItem,
    Popover,
    Group,
    Selector,
    Cell,
    CellBox,
    XSwitch,
    XButton,
    XInput,
    XHeader,
    XTextarea,
    Rater,
    Calendar
  },
  data() {
    return {
      bpt: "上拉加载更多",
      tabIndex: 0,
      searcheNums: 0,
      page: 1,
      nums: 10, // 每页显示数量
      allLoaded: false, // 是否加载完所有内容
      show7: false,
      filterTask: [],
      typeList: [
        { key: "0", value: "月计划" },
        { key: "1", value: "临时计划" }
      ],
      stateList: [{ key: "0", value: "未完成" }, { key: "1", value: "已完成" }],
      deptList: [
        { key: "100", value: "客运营销中心" },
        { key: "71", value: "供电机电中心" },
        { key: "32", value: "工务通号中心" },
        { key: "25", value: "车辆中心" },
        { key: "145", value: "调度中心" },
        { key: "19", value: "物资部" },
        { key: "16", value: "安保部" },
        { key: "141", value: "技术部" },

        { key: "3", value: "综合部" },
        { key: "7", value: "人教部" },
        { key: "10", value: "企划部" },
        { key: "13", value: "财务部" },
        { key: "267", value: "党群工作部" }
        // { key: "总经理室", value: "总经理室" },
        // { key: "综合部", value: "综合部" },
        // { key: "人教部", value: "人教部" },
        // { key: "企划部", value: "企划部" },
        // { key: "财务部", value: "财务部" },
        // { key: "安保部", value: "安保部" },
        // { key: "物资部", value: "物资部" },
        // { key: "车辆中心", value: "车辆中心" },
        // { key: "工务通号中心", value: "工务通号中心" },
        // { key: "供电机电中心", value: "供电机电中心" },
        // { key: "客运营销中心", value: "客运营销中心" },
        // { key: "技术部", value: "技术部" },
        // { key: "调度中心", value: "调度中心" },
        // { key: "党群工作部", value: "党群工作部" }
      ],
      popovervisble: false,
      myAcList: [],
      allAcList: [],
      teachList: [],
      activeName: "0",
      searchType: "",
      searchKey: "",
      searchDateF: "",
      searchDateE: "",
      searchPost: "",
      state: "",
      infocode: "",
      noData: "",
      userInfo: null,
      userName: "",
      userCode: "",
      searchDept: "",
      actual: {
        id: undefined
      },
      pickerOptions2: {
      }
    };
  },
  computed: {},
  watch: {
    infocode: function(newvalue, oldvale) {
      this.getUserInfo();
      // console.log("mhome-watch-infocode");
    },
    userCode: function(newvalue, oldvale) {
      this.getUser();
      // console.log("watch-userCode-this.userCode",this.userCode)
    this.getMyAcList();      
    this.getMyTeachAcList();    
    // this.getAllAcList();
    },
    searchDept: function(newvalue, oldvale) {
      this.getAllAcList();
    }
  },
  mounted() {
    // console.log("mounted");
    this.dealSearch();
  },
  created() {
    // console.log("mhome-created");
    // this.userInfo = this.$store.state.user;       //2019.9.24更新
    // if(this.userInfo != null){
    //   console.log("this.userInfo不为空");
    //   this.userCode = this.userInfo.user_code;
    // this.userName = this.userInfo.user_name;
    // this.searchDept = this.userInfo.user_deptId;
    
    // }else{
      this.getDDInfo();
      
    // }
    
    // console.log("this.searchDept",this.searchDept)
    
    
  },
  methods: {
    getDDInfo() {
      if (process.env.NODE_ENV == "development") {
        this.infocode = "123";
        // console.log("getDDInfo-development");
      } else {
        var _this = this;
        var ddurl = document.URL.split("#")[0];
        var query = { ddurl: ddurl };
        var dd = window.dd;
        var res_corpId = "ding786250c40f654fe4";
        console.log("dd", dd);
        dd.ready(function() {
          dd.runtime.permission.requestAuthCode({
            corpId: "ding786250c40f654fe4",
            onSuccess: function(info) {
              console.log("dd_info_code:" + info.code);
              _this.infocode = info.code;
            },
            onFail: function(err) {
              alert("requestAuthCode——登录验证失败，请联系管理员。");
            }
          });
        });
      }
      console.log("getDDInfo-this.infocode :" + this.infocode);
    },
    async getUserInfo() {
      if (this.infocode) {
        getDDUserInfo(this.infocode).then(response => {
          if (response.status == 200) {
            this.userInfo = response.data;
            // console.log("mhome-getUserInfo-this.userInfo", this.userInfo);
            this.userCode = this.userInfo.user_code;
              this.userName = this.userInfo.user_name;
            // this.$store.commit("setUser", this.userInfo);
            // console.log("this.userName", this.userName);
            // console.log("this.userCode", this.userCode);
          } else {
            alert("数据加载失败，请重试！");
          }
        });
      }
    },
    async getUser() {
      getUser().then(response => {
        if (response.status == 200) {
          this.userInfo = response.data;
              this.$store.commit("setUser", this.userInfo);
            //      this.userCode = this.userInfo.user_code;
            //  this.userName = this.userInfo.user_name;
          this.searchDept = this.userInfo.user_deptId;
          // console.log("getUser-this.searchDept",this.searchDept)
        } else {
          alert("数据加载失败，请重试！");
        }
      });
    },
    // 根据培训实际与培训反馈信息填写情况，计算列表页面显示颜色(已全部完成，显示绿色)
    compu(sumNo, fdNo) {
      // var finished = false;
      if (sumNo != null && fdNo != null) {
        for (const v of sumNo) {
          if (v.indexOf(this.userCode) > -1) {
            var sumFini = true;
          }
        }
        for (const y of fdNo) {
          if (y.indexOf(this.userCode) > -1) {
            var fdFini = true;
          }
        }
        return sumFini && fdFini;
      } else {
        return false;
      }
    },
    // 显示详情页
    showDetail(task,tabIndex) {
      this.$router.push({
        path: "/mhome/actualDetail",
        query: { eventId: task.id, tabIndex: tabIndex}
      });
      
    },
    // 我的培训记录
    getMyAcList() {
      getMyAcList(this.userCode).then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          this.myAcList = response.data.items;
          this.dealSearch();
          // console.log("getMyAcList-this.myAcList", this.myAcList);
        } else {
          console.log(response);
          this.$notify({
            title: "失败",
            message: response.status + response.data.msg,
            type: "error",
            duration: 2000
          });
        }
      });
    },
    // 我授课的培训记录
       getMyTeachAcList() {
      getMyTeachAcList(this.userCode).then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          // console.log("getMyTeachAcList-this.userCode",this.userCode)
          this.teachList = response.data.items;
          this.dealSearch();
          // console.log("getMyTeachAclist-this.teachList", this.teachList);
        } else {
          console.log(response);
          this.$notify({
            title: "失败",
            message: response.status + response.data.msg,
            type: "error",
            duration: 2000
          });
        }
      });
    },
    // 所有记录
    getAllAcList() {
      getAllAcList(this.searchDept).then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          // console.log("getAllAcList-this.searchDept",this.searchDept);
         this.allAcList = response.data.items;
          this.dealSearch();
            // console.log("this.allAcList", this.allAcList);
        } else {
          console.log(response);
          this.$notify({
            title: "失败",
            message: response.status + response.data.msg,
            type: "error",
            duration: 2000
          });
        }
      // });
      })
      .catch(err =>{
        console.log(err);
      });
    },
    loadTop() {
      this.$refs.loadmore.onTopLoaded();
    },
    loadBottom() {
      this.page++;
      this.dealSearch();
      this.$refs.loadmore.onBottomLoaded();
    },
    popOnHide() {
      this.dealSearch();
      // console.log("on hide");
    },
    onItemClick(index) {
      this.page = 1;
      this.dealSearch();
    },
    fdSub() {
      this.showFdDialog = false;
    },
    dealSearch() {
      this.searcheNums = 0;
      if (this.tabIndex === 0) {
        this.filterTask = this.myAcList;
        if (this.searchDateF != "") {
          this.searcheNums = this.searcheNums + 1;
          this.filterTask = this.filterTask.filter(
            task => this.searchDateF <= task.date
          );
        }
        if (this.searchDateE != "") {
          this.searcheNums = this.searcheNums + 1;
          this.filterTask = this.filterTask.filter(
            task => this.searchDateE >= task.date
          );
        }
        if (this.searchDept != "") {
          this.searcheNums = this.searcheNums + 1;
          this.filterTask = this.filterTask.filter(
            task => this.searchDept == task.myDept
          );
        }
        if (this.searchType != "") {
          this.searcheNums = this.searcheNums + 1;
          this.filterTask = this.filterTask.filter(
            task => this.searchType == task.type
          );
        }
        if (this.searchKey != "") {
          this.searcheNums = this.searcheNums + 1;
          this.filterTask = this.filterTask.filter(
            task => task.item.toUpperCase().indexOf(this.searchKey.toUpperCase()) != -1
            // task => task.item.indexOf(this.searchKey) != -1
          );
        }
        if (this.searchPost != "") {
          this.searcheNums = this.searcheNums + 1;
          this.filterTask = this.filterTask.filter(
            task => task.post.indexOf(this.searchPost) != -1
          );
        }
      } else if (this.tabIndex === 1) {
        this.filterTask = this.allAcList;
        if (this.searchDateF != "") {
          this.searcheNums = this.searcheNums + 1;
          this.filterTask = this.filterTask.filter(
            task => this.searchDateF <= task.date
          );
        }
        if (this.searchDateE != "") {
          this.searcheNums = this.searcheNums + 1;
          this.filterTask = this.filterTask.filter(
            task => this.searchDateE >= task.date
          );
        }
        if (this.searchDept != "") {
          this.searcheNums = this.searcheNums + 1;
          this.filterTask = this.filterTask.filter(
            task => this.searchDept == task.myDept
          );
        }
        if (this.searchType != "") {
          this.searcheNums = this.searcheNums + 1;
          this.filterTask = this.filterTask.filter(
            task => this.searchType == task.type
          );
        }
        if (this.searchKey != "") {
          this.searcheNums = this.searcheNums + 1;
          this.filterTask = this.filterTask.filter(
              task => task.item.toUpperCase().indexOf(this.searchKey.toUpperCase()) != -1
        //  task => task.item.indexOf(this.searchKey) != -1
          );
        }
        if (this.searchPost != "") {
          this.searcheNums = this.searcheNums + 1;
          this.filterTask = this.filterTask.filter(
            task => task.post.indexOf(this.searchPost) != -1
          );
        }
      } else if (this.tabIndex === 2) {
        this.filterTask = this.teachList;
        // console.log("this.filterTask",this.filterTask);
        if (this.searchDateF != "") {
          this.searcheNums = this.searcheNums + 1;
          this.filterTask = this.filterTask.filter(
            task => this.searchDateF <= task.date
          );
        }
        if (this.searchDateE != "") {
          this.searcheNums = this.searcheNums + 1;
          this.filterTask = this.filterTask.filter(
            task => this.searchDateE >= task.date
          );
        }
        if (this.searchDept != "") {
          this.searcheNums = this.searcheNums + 1;
          this.filterTask = this.filterTask.filter(
            task => this.searchDept == task.myDept
          );
        }
        if (this.searchType != "") {
          this.searcheNums = this.searcheNums + 1;
          this.filterTask = this.filterTask.filter(
            task => this.searchType == task.type
          );
        }
        if (this.searchKey != "") {
          this.searcheNums = this.searcheNums + 1;
          this.filterTask = this.filterTask.filter(
               task => task.item.toUpperCase().indexOf(this.searchKey.toUpperCase()) != -1
          // task => task.item.indexOf(this.searchKey) != -1
          );
        }
        if (this.searchPost != "") {
          this.searcheNums = this.searcheNums + 1;
          this.filterTask = this.filterTask.filter(
            task => task.post.indexOf(this.searchPost) != -1
          );
        }
      }

      if (this.filterTask.length < this.page * this.nums + 1) {
        this.allLoaded = true;
        this.noData = "别拉了,没有数据了!";
      } else {
        this.allLoaded = false;
        this.noData = "";
      }
      this.filterTask = this.filterTask.slice(0, this.nums * this.page);
    },
    showSearch() {
      this.show7 = true;
      // console.log("showSearch");
    }
  }
};
</script>
<style lang="less" scoped>
@import "~vux/src/styles/1px.less";
@import "~vux/src/styles/center.less";
#head_top {
  background-color: #1e90ff;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 2.95rem;
  z-index: 1;
}
.div_head {
  position: fixed;
  background-color: #fff;
  left: 0;
  top: 3rem;
  width: 100%;
  z-index: 1;
}
.box {
  padding: 15px;
}
.icon-daiban {
  font-size: 25px;
}
.icon-yiban {
  font-size: 25px;
}
.icon-quanbu {
  font-size: 25px;
}
.active-6-1 {
  color: rgb(252, 55, 140) !important;
  border-color: rgb(252, 55, 140) !important;
}
.active-6-2 {
  color: #04be02 !important;
  border-color: #04be02 !important;
}
.active-6-3 {
  color: rgb(55, 174, 252) !important;
  border-color: rgb(55, 174, 252) !important;
}
.tab-swiper {
  background-color: #fff;
  height: 100px;
}
.task_list_ul {
  .task_list_li {
    background-color: #fff;
    display: flex;
    margin-bottom: 0.5rem;
    padding: 0.6rem 0.6rem 0;
    text-align: left;
    .task_list_title {
      width: 80%;
      text-align: left;
    }
    .task_list_approve {
      width: 20%;
      text-align: right;
    }
  }
}
.task_list0 {
  padding: 12px;
  text-align: left;
  color: rgb(38, 148, 75);
  //   color: rgb(252, 55, 140);
}
.task_list1 {
  padding: 12px;
  text-align: left;

  //   color: rgb(134, 136, 138);
}
.input-class {
  width: 300px;
  height: 40px;
}
</style>